import React,{Component} from 'react';
import {Table,Button,Modal,Form,Icon,Input} from 'antd'

import Myform from './Myform'

class Mytable extends Component{
    constructor(props){
        super(props);
        this.state={
           dataSource:[
                {
                  key: 1,
                  name: '胡彦斌',
                  age: 32,
                  address: '西湖区湖底公园1号',
                },
                {
                  key: 2,
                  name: '胡彦祖',
                  age: 42,
                  address: '西湖区湖底公园1号',
                },
              ],
              id:3,
              visible:false,
              count:'',
              updateDate:[]
        }
        this.columns = [
            {
              title: '姓名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '年龄',
              dataIndex: 'age',
              key: 'age',
              render:(text,record,index)=>{
                  return <p>{record.age}</p>
              }
            },
            {
              title: '住址',
              dataIndex: 'address',
              key: 'address',
            },
            {
                title:'操作',
                dataIndex:'',
                key:'x',
                render:(record)=>{

                    return(
                        <div>
                            <a onClick={()=>this.update(record,record.key)}>编辑</a>&nbsp;&nbsp;
                            <a onClick={()=>this.delte(record.key)}>删除</a>&nbsp;&nbsp;
                            <a onClick={()=>this.select(record.key)}>详情</a>
                        </div>
                    )
                }
            }
          ]
    }
    //页面删除功能
    delte=(id)=>{
        const {dataSource} =this.state//解构赋值获取到state中的数组
        let arr= dataSource.filter(item=>item.key!=id)//使用filter进行查找将不是当前点击的id找出来返回一个新的数组
        this.setState({//重新对state中的数组进行赋值
            dataSource:arr
        })
    }
    //点击页面的添加按钮
    address=()=>{
        this.setState({
            visible:true,
            count:''
        })
    }
    //点击模态框的取消按钮
    handleesc=()=>{
        this.setState({
            visible:false
        })
    }
    //点击模态框的保存按钮
    handleok=(values,id)=>{
        const {dataSource,count} = this.state
        if(count==''){
            dataSource.push({
                key:dataSource.length+1,
                name:values.name,
                age:values.age,
                address:values.address
            })
            this.setState({
                dataSource,
                visible:false
            })
        }else{
            let arr=dataSource.map((item)=>{
                return item.key==id?item.key=values:item
            })
           this.setState({
            dataSource:arr,
            visible:false
           })
        }
    }
    //点击页面的修改按钮
    update=(values)=>{
        this.setState({
            visible:true,
            updateDate:values,
            count:values.key
        })
    }
    render(){
        const {dataSource,visible,count,updateDate} = this.state
        return(
            <div>
            <Button type="primary" onClick={this.address}>添加</Button>
                <Table dataSource={dataSource} columns={this.columns} />
                {
                    visible?
                    <Myform
                     count={count}
                     visible={visible}
                     handleesc={this.handleesc}
                     handleok={this.handleok}
                     updateDate={updateDate}
                    />
                    :null
                }
            </div>
        )
    }
}
export default Mytable